<template>
  <div class="list">
    <table v-show="list.length > 0" class="table table-bordered table-hover">
      <caption>文章底部广告列表</caption>
      <thead>
        <tr>
          <th class="col-xs-1 col-nowrap">组合ID</th>
          <th>组合标题</th>
          <th>组合描述</th>
          <th class="col-xs-2">配图</th>
          <th>组合类型</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ad in list">
          <td>{{ad.betaId}}</td>
          <td>{{ad.betaName}}</td>
          <td>{{ad.betaDesc}}</td>
          <td><img :src="ad.betaPicUrl"></td>
          <td class="col-nowrap">{{ +ad.betaType === 1 ? '迷你组合' : '普通组合'}}</td>
          <td class="text-right col-nowrap">
            <button class="btn btn-sm btn-primary" @click="updateAd(ad)">修改</button>
            <button class="btn btn-sm btn-danger" @click="deleteAd(ad.betaId)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
  </div>
</template>
<style src="./list.css" scoped></style>
<script src="./list.js"></script>